<%@page contentType="text/html;charset=UTF-8"%>
<%
	request.setCharacterEncoding("UTF-8");
%>

<%@page import="mobile.BrandModelSeparator"%>
<%@page import="mobile.MobileType"%>
<%@page import="srv.MobileOffersProxy"%>
<%@page import="client.Starter"%><html>
<head>
<title>Mobile Offers</title>
<script>
	function onBrandChanged() {
		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//alert(xmlhttp.responseText);
				updateModels(xmlhttp.responseText);
			}
		}
		var brandSelect = document.getElementById("brandSelect");
		var brandId = brandSelect.options[brandSelect.selectedIndex].value;

		var submitButton = document.getElementById("submitButton");
		if (brandId == "0") {
			submitButton.setAttribute("disabled", "disabled");
		} else {
			submitButton.removeAttribute("disabled");

		}

		xmlhttp.open("GET", "../MobileServlet?action=getModels&brandId="
				+ brandId, true);
		xmlhttp.send();
	}

	function updateModels(/*String*/modelsString) {
		var stringSplit = modelsString.split("\n");
		console.debug(stringSplit);

		var modelSelect = document.getElementById("modelSelect");
		modelSelect.length = 0; //removes all options

		for ( var i = 1; i < stringSplit.length - 2; i++) {
			var idNameArr = stringSplit[i].split(",");
			modelSelect.options[modelSelect.options.length] = new Option(
					idNameArr[1], idNameArr[0]);
		}
	}

	function onSubmitClicked() {
		var brandSelect = document.getElementById("brandSelect");
		var brandId = brandSelect.options[brandSelect.selectedIndex].value;

		var modelSelect = document.getElementById("modelSelect");
		var modelId = modelSelect.options[modelSelect.selectedIndex].value;

		var yearFromSelect = document.getElementById("yearFromSelect");
		var yearFrom = yearFromSelect.options[yearFromSelect.selectedIndex].value;

		var yearToSelect = document.getElementById("yearToSelect");
		var yearTo = yearToSelect.options[yearToSelect.selectedIndex].value;

		var startPrice = document.getElementById("startPriceText").value;
		var endPrice = document.getElementById("endPriceText").value;

		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				console.debug("offers: ", xmlhttp.responseText);
				populateOffersTable(xmlhttp.responseText);
			}
		}
		xmlhttp.open("GET", "../MobileServlet?action=getOffers&brandId="
				+ brandId + "&modelId=" + modelId + "&startYear=" + yearFrom
				+ "&endYear=" + yearTo + "&startPrice=" + startPrice
				+ "&endPrice=" + endPrice, true);
		xmlhttp.send();
	}

	function populateOffersTable(/*String*/responseString) {
		clearOffersTable();
		var offersTable = document.getElementById("offersTable");

		var offersSplit = responseString.split("\n");
		console.debug(offersSplit);

		for ( var i = 1; i < offersSplit.length - 2; i++) {
			var offer = offersSplit[i].split(",");

			var row = document.createElement("tr");
			offersTable.appendChild(row);

			var brandTd = document.createElement("td");
			brandTd.innerHTML = offer[0];
			row.appendChild(brandTd);

			var modelTd = document.createElement("td");
			modelTd.innerHTML = offer[1];
			row.appendChild(modelTd);

			var yearTd = document.createElement("td");
			yearTd.innerHTML = offer[2];
			row.appendChild(yearTd);

			var priceTd = document.createElement("td");
			priceTd.innerHTML = offer[3];
			row.appendChild(priceTd);

			var contactTd = document.createElement("td");
			contactTd.innerHTML = offer[4];
			row.appendChild(contactTd);

		}
	}

	function clearOffersTable() {
		var offersTable = document.getElementById("offersTable");
		for ( var i = offersTable.rows.length - 1; i > 0; i--) {
			offersTable.deleteRow(i);
		}
	}

	function createAnOfferClicked() {
		console.debug("Create offer clicked.");

		var xmlhttp;
		if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
			xmlhttp = new XMLHttpRequest();
		} else {// code for IE6, IE5
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
		/*
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
			}
		}
		 */
		xmlhttp.open("GET", "../MobileServlet?action=createOffer", true);
		xmlhttp.send();
	}
</script>
</head>
<body>
<jsp:useBean id="sampleMobileOffersProxyid" scope="session"
	class="srv.MobileOffersProxy" />
<%
	if (request.getParameter("endpoint") != null
			&& request.getParameter("endpoint").length() > 0)
		sampleMobileOffersProxyid.setEndpoint(request
				.getParameter("endpoint"));
%>

<table>
	<tr>
		<td>Select brand:</td>
		<td><select id="brandSelect" onChange="onBrandChanged()">
			<option value="0">-</option>
			<%
				String brands = sampleMobileOffersProxyid.getAllBrands();
				BrandModelSeparator separator = new BrandModelSeparator(brands);
				MobileType[] types = separator.getTypes();
				for (int i = 0; i < types.length; i++) {
			%>
			<option value="<%=types[i].getId()%>"><%=types[i].getName()%></option>
			<%
				}
			%>
		</select></td>
	</tr>
	<tr>
		<td>Select model:</td>
		<td><select id="modelSelect">
		</select></td>
	</tr>
	<tr>
		<td>Year from:</td>
		<td><select id="yearFromSelect">
			<%
				java.util.Calendar cal = java.util.Calendar.getInstance();
				int currentYear = cal.get(java.util.Calendar.YEAR);
				for (int i = 0; i < 15; i++) {
			%>
			<option value="<%=currentYear - i%>"><%=currentYear - i%></option>
			<%
				}
			%>
		</select></td>
	</tr>
	<tr>
		<td>Year to:</td>
		<td><select id="yearToSelect">
			<%
				for (int i = 0; i < 15; i++) {
			%>
			<option value="<%=currentYear - i%>"><%=currentYear - i%></option>
			<%
				}
			%>
		</select></td>
	</tr>
	<tr>
		<td>Start Price ($):</td>
		<td><input type="text" id="startPriceText" size="8" value="10"></td>
	</tr>
	<tr>
		<td>End Price ($):</td>
		<td><input type="text" id="endPriceText" size="8" value="100000"></td>
	</tr>
</table>
<input type="button" value="Submit" disabled="disabled"
	id="submitButton" onClick=
	onSubmitClicked();;
>
<input type="button" value="Create an offer"
	onClick=
	createAnOfferClicked();
>
<table id="offersTable">
	<tr>
		<th>Brand</th>
		<th>Model</th>
		<th>Year</th>
		<th>Price</th>
		<th>Contact</th>
	</tr>
</table>
</body>
</html>